<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌手列表 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>

    <link rel="shortcut icon" href="./网站图标.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/vip.css">
    <style>
        a:hover{
            color: #31c27c; 
        }
    </style>
</head>
<body>
    <div class="main">
          <!-- 头部开始 -->
    <div class="header">
        <div class="container">
            <div class="logo">
                <img src="./img/logo.png" alt="">
            </div>
           <ul class="mod_nav">
            <li><a href="#" class="index">首页</a></li>
            <li><a href="#">特权与等级</a></li>
            <li><a href="#">年费专区</a></li>
           </ul>
           <div class="mod_identity">
            <span>Hello</span>
            <a href="#">续费绿钻豪华版</a>
            <a href="#">充值乐币</a>
           </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <div class="mod_banner">
        <div class="banner_show_content">
            <h2></h2>
            <p></p>
            <a href="#">续费绿钻豪华版</a>
        </div>
      <div class="banner_show_nav">
        <div class="container">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
      </div>
    </div>

   
    <div class="mod_feature">
        <div class="feature_bg"></div>
        <div class="feature_intro">
            <div class="container">
            <h2></h2>
            <p></p>
            <ul>
                <li>
                    <a href="#">
                        <span class="icon panle"></span>
                        <span>高品质音乐下载</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon1 panle"></span>
                        <span>无损音乐下载</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon2 panle"></span>
                        <span>付费音乐下载</span>
                    </a>
                </li>
            </ul>
            </div>
            
        </div>
    </div>
    <div class="mod_feature1">
        <div class="feature_bg1"></div>
        <div class="feature_intro1">
            <div class="container">
            <h2></h2>
            <p></p>
            <ul>
                <li>
                    <a href="#">
                        <span class="icon1 panle"></span>
                        <span>个性主题</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon2 panle"></span>
                        <span>歌词海报字体</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon3 panle"></span>
                        <span>个性弹幕气泡</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon4 panle"></span>
                        <span>QQ音乐首唱会</span>
                    </a>
                </li>
            </ul>
            </div>
            
        </div>
    </div>
    <div class="mod_feature2">
        <div class="feature_bg2"></div>
        <div class="feature_intro2">
            <div class="container">
            <h2></h2>
            <p></p>
            <ul>
                <li>
                    <a href="#">
                        <span class="icon1 panle"></span>
                        <span>闪电尊贵图标</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon2 panle"></span>
                        <span>付费音乐专属图标</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon3 panle"></span>
                        <span>成长加速</span>
                    </a>
                </li>
            </ul>
            </div>
            
        </div>
    </div>
    <div class="mod_feature3">
        <div class="feature_bg3"></div>
        <div class="feature_intro3">
            <div class="container">
            <h2></h2>
            <p></p>
            <ul>
                <li>
                    <a href="#">
                        <span class="icon1"></span>
                        <span>QQ空间背景音乐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon2"></span>
                        <span>个性音乐</span>
                    </a>
                </li>
               
            </ul>
            </div>
            
        </div>
    </div>

    </div>
  
    <!-- 右边的固定图标 -->
    <ul class="mod_tool_bar">
        <li class="tool_bar__item">
            <a href="#"></a>
        </li>
        <li class="tool_bar__item">
            <a href="#"></a>
        </li>
        <li class="tool_bar__item">
            <a href="#"></a>
        </li>
    </ul>
</body>
</html>